<template>
    <div class="goodsinfo-container">


        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>
        <!-- 商品轮播图区域 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swiper :viewPagerList="viewPagers" :isfull="false"></swiper>
                </div>
            </div>
        </div>
        <!-- 商品购买区域 -->
        <div class="mui-card">
            <div class="mui-card-header">{{ commodityInfo.abstractMsg }}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        销售价：<span
                            class="now_price">￥{{ commodityInfo.sellPrice }}</span>&nbsp;&nbsp;市场价：<del>￥{{ commodityInfo.stickerPrice }}</del>
                    </p>
                    <p>
                        购买数量：
                        <numbox @getcount="getSelectedCount" :max="commodityInfo.stock"></numbox>
                    </p>
                    <p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
                        <!-- 分析： 如何实现加入购物车的时候，拿到选择的数量 -->
                        <!-- 1. 经过分析：按钮属于goodsinfo页面，数字属于numberbox组件 -->
                        <!-- 2. 由于涉及到了父子组件的嵌套，所以，无法再goodsinfo页面中
                        无法获取到选中商品的数量值 -->
                        <!-- 3. 怎么解决这个问题：涉及到了子组件向父组件传值(事件调用机制) -->
                        <!-- 4. 事件调用的本质：父向子传递方法，子调用这个方法，同时把数据当做参数
                        传递给这个方法 -->

                    </p>
                </div>
            </div>
        </div>

        <!-- 商品参数区域 -->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>
                        商品货号：{{ commodityInfo.commodityId }}
                    </p>
                    <p>
                        库存情况：{{ commodityInfo.stock }}{{ commodityInfo.commodityUom }}
                    </p>
                    <p>
                        上架时间：{{ commodityInfo.addTime | dateFormat}}
                    </p>

                </div>
            </div>
            <div class="mui-card-footer">
                <p>
                    <mt-button type="primary" size="large" plain @click="goPicDetail(commodityInfo.commodityId)">图文介绍
                    </mt-button>
                    <mt-button type="danger" size="large" plain @click="goComment(commodityInfo.commodityId)">商品评论
                    </mt-button>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
    import swiper from '../subocomponents/Swiper.vue'
    import numbox from '../subocomponents/goosinfo_numbox.vue'
    import {Toast} from 'mint-ui'
    export default {
        data() {
            return {
                commodityInfo: {},
                commodityId: this.$route.params.id, // 将路由参数id挂载
                picture: this.$route.params.pic,
                viewPagers: [], // 轮播图
                ballFlag: false, //控制小球隐藏和显示的标识符
                selectedCount: 1,//保存用户选中的商品数量，默认为1
                userId: this.$store.state.userId, 
            }
        },
        created() {
            this.getCommodityInfo();

        },
        methods: {
            getCommodityInfo() {
                this.$http.get('front/goods/' + this.commodityId).then(result => {
                    if (result.body.code === 1) {
                        this.commodityInfo = result.body.data;
                        this.viewPagers = result.body.data.viewPagersUrl;
                        this.getViewPagers();
                    }else{
                        Toast('与服务器断开连接')
                    }
                })
            },
            getViewPagers() {
                var viewPagers = []
                this.viewPagers.forEach(function (item) {
                    var viewpager = {
                        img: 'http://' + item,
                    }
                    viewPagers.unshift(viewpager);
                })
                this.viewPagers = viewPagers;
            },
            goPicDetail(id) {
                this.$router.push({
                    name: "goodsdesc",
                    params: {
                        id
                    }
                })
            },
            goComment(id) {
                this.$router.push({
                    name: "goodscomment",
                    params: {
                        id
                    }
                })
            },
            addToShopCar() {
                this.ballFlag = !this.ballFlag
                // {id:商品id，count:要购买的数量,price:商品单价，selected:false}
                // 拼接出一个要保存到store中car数组里面的商品信息对象
                var goodsinfo = {
                    commodityId: this.commodityId,
                    commodityQuantity: this.selectedCount,
                    picture: this.picture
                };
                this.$http.post('front/car/' + this.userId + '/goods', goodsinfo,{emulateJSON: true}).then(result => {
                    if (result.body.code === 1) {
                        Toast('加入购物车成功');
                    }else{
                        Toast('与服务器断开连接')
                    }
                })
                this.$store.commit("addToCar",goodsinfo);
                // 调用store中mutations来将商品加入购物车
                // this.$store.commit("addToCar", goodsinfo);
            },
            beforeEnter(el) {
                el.style.transform = "translate(0,0)"
            },
            enter(el, done) {
                el.offsetWidth;
                // 小球动画优化思路：
                // 1. 先分析导致动画不准确问题的原因：主要是把小球最终位移到的位置，写死了
                // 2. 只要测试的时候，分辨率不一样，或者，滚动条滚动后，就会出现问题
                // 3. 因此，我们经过分析，得到结论，不能把 位置的横纵坐标直接写死了，是应该根据不同情况
                // ，动态计算这个坐标值；
                // 4. 经过分析，得出解析思路：让先得到徽标的横纵坐标，再得到小球的横纵坐标，两者差值就是相对位移距离
                // 5. 如何获取 徽标 和小球 的位置呢？ domObject.getBoundingClientRect()
                // 获取小球在页面中的位置
                const ballPostition = this.$refs.ball.getBoundingClientRect();
                // 获取徽标位置
                const badgePosition = document.getElementById('badge').getBoundingClientRect();
                const xDistance = badgePosition.left - ballPostition.left;
                const yDistance = badgePosition.top - ballPostition.top;
                el.style.transform = `translate(${xDistance}px, ${yDistance}px)`;
                el.style.transition = "all 0.5s cubic-bezier(.4,-0.3,1,.68)";
                done();
            },
            afterEnter(el) {
                this.ballFlag = !this.ballFlag;
            },
            getSelectedCount(count) {
                // 当子组件把 选中的数量传递给父组件的时候，把选中的值保存
                this.selectedCount = count;
                console.log("父组件拿到的数量：" + this.selectedCount)
            }
        },
        components: {
            swiper,
            numbox
        }
    }
</script>

<style lang="scss" scoped>
    .goodsinfo-container {
        background-color: #eee;
        overflow: hidden;

        .now_price {
            color: red;
            font-size: 16px;
            font-weight: bold;
        }

        .mui-card-footer,
        .mui-card-header {
            display: block;

            button {
                margin: 10px 0;
            }
        }
    }

    .ball {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        z-index: 99;
        top: 407px;
        left: 152px;

    }
</style>